<template>
	<view class="pt-md" :style="{background:pageColor}" v-if="isLoad">
		<view class="ml-md mr-md radius-24 fill-base pl-lg pr-lg pb-sm mb-md" v-for="(pItem,pIndex) in list.data" :key="pIndex">
			<view class="f-title text-bold item-title">{{pItem[0].title || ''}}</view>
			<view class="flex-center item-box" :class="[{'b-1px-t':index > 0}]" v-for="(item,index) in pItem" :key="index">
				<image :src="item.avatarUrl" mode="aspectFill" class="item-cover"></image>
				<view class="flex-1">
					<view class="flex-between">
						<view class="text-bold">{{item.nickName}}</view>
						<text class="text-bold" style="color: #E82F21;" v-if="new Date().getTime() < item.end_time*1000">冻结中</text>
						<text class="text-bold" style="color: #44A860;" v-else>可提现</text>
					</view>
					<view class="pt-md flex-y-center">
						<text class="f-desc c-paragraph">已支付：</text>
						<view class="flex-y-baseline">
							<text class="text-bold f-sm-title">{{item.pay_price}}</text>
							<text class="f-caption">元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<load-more :noMore="list.current_page >= list.last_page && list.data.length > 0" :loading="loading">
		</load-more>
		<abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1" :isCenter="true"></abnor>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				options: {},
				isLoad: false,
				list: {
					data: []
				},
				param: {
					page: 1
				},
				oldList: {
					data: []
				}
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			this.options = options
			this.$util.showLoading()
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {
				
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.getList()
				
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			async getList() {
				let {
					list,
					oldList,
					param
				} = this
				 
				let newList = await this.$api.partner.getPartnerWater(param)
				if (param.page == 1) {
					this.oldList = this.$util.deepCopy(newList)
					if(newList.data.length > 0){
						newList.data = this.groupBy(newList.data, item => item.order_id);
					}
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.oldList = this.$util.deepCopy(newList)
					newList.data = this.groupBy(newList.data, item => item.order_id);
					this.list = newList
				}
				this.loading = false
				this.isLoad = true
				this.$util.hideAll()
			},
			groupBy(array, key) {
			  return array.reduce((result, currentItem) => {
			    // 使用 key 函数获取分组的键
			    const keyValue = key(currentItem);
			    // 确保 result 对象中有对应键的数组
			    if (!result[keyValue]) {
			      result[keyValue] = [];
			    }
			    // 将当前项添加到对应键的数组中
			    result[keyValue].push(currentItem);
			    return result;
			  }, {});
			}
		}
	}
</script>


<style lang="scss">
	.item-title{
		padding: 36rpx 0 12rpx 0;
	}
	.item-cover{
		width: 110rpx;
		height: 110rpx;
		border-radius: 110rpx;
		margin-right: 24rpx;
		display: block;
	}
	.item-box{
		padding: 25rpx 0;
	}
</style>